<template>
  <div class="container">
    <div class="header-box">
      <van-row>
        <van-col span="3">
          <div class="header-item" @click="showDatePopup = true">
            <van-icon name="manager" size="25" />
          </div>
        </van-col>
        <van-col span="21">
          <div class="header-item">
            <van-field
              v-model="queryCondition.keyword"
              left-icon="search"
              @blur="keywordQuery"
              :placeholder="
                active == 0
                  ? 'order no or cargo name'
                  : 'container code or cargo name'
              "
            />
          </div>
        </van-col>
      </van-row>
    </div>
    <van-tabs
      v-model="active"
      @change="changeTabs"
      color="#2c3e50"
      line-width="70px"
      duration="0.5"
    >
      <van-tab title="warehouse"></van-tab>
      <van-tab title="container"></van-tab>
      <div style="height: 5px"></div>
      <div class="filter-rest" @click="restList">
        <svg
          t="1678112217445"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2779"
          width="20"
          height="20"
        >
          <path
            d="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z"
            fill="#575B66"
            p-id="2780"
          ></path>
        </svg>
      </div>
    </van-tabs>
    <van-list
      class="list-box"
      v-model="pageLoading"
      :finished="finished"
      finished-text="没有更多了"
      @load="scrollHandle"
    >
      <!-- 订单模板 -->
      <div v-if="active == 0">
        <div class="order-item" v-for="(item, index) in listData" :key="index">
          <p class="order-header">
            <span class="item-label">Order No：</span>
            {{ item.orderno }}
          </p>
          <div class="order-info">
            <p><span class="item-label">Cargo：</span>{{ item.goodsName }}</p>
            <p>
              <span class="item-label">Packages：</span>
              {{ item.packageQuantity }}
            </p>
            <p>
              <span class="item-label">Total Number：</span>
              {{ item.total }}
            </p>
            <p>
              <span class="item-label">Storage Date ：</span>
              {{ item.warehousingTime }}
            </p>
            <p>
              <span class="item-label">Logistics company：</span>
              {{ item.logistics }}
            </p>
          </div>
        </div>
      </div>

      <!-- 获取模板 -->
      <div v-if="active == 1">
        <div class="order-item" v-for="(item, index) in listData" :key="index">
          <p class="order-header">
            <span class="item-label">Container Code：</span>
            {{ item.code }}
          </p>
          <div class="order-info">
            <p>
              <span class="item-label">Cargo：</span>
              {{ item.customerGoods }}
            </p>
            <p>
              <span class="item-label">Total：</span>
              {{ item.goodsNum }}
            </p>
            <p>
              <span class="item-label">Packages：</span>
              {{ item.goodsSquare }}
            </p>
            <p>
              <span class="item-label">arrival Time：</span>
              {{ item.arrivalTime }}
            </p>
            <p>
              <span class="item-label">loading Time：</span>
              {{ item.loadingTime }}
            </p>
            <p>
              <span class="item-label">container owner ：</span>
              {{ item.master }}
            </p>
          </div>
        </div>
      </div>
    </van-list>
    <van-popup
      v-model="showDatePopup"
      position="left"
      :style="{ height: '100%', width: '70%' }"
      class="user-info-box"
    >
      <van-cell-group>
        <div class="user-info-item">
          <van-icon name="manager" size="18px" />
          <span>{{ userInfo.username }}</span>
        </div>
        <div class="user-info-item">
          <van-icon name="column" size="18px" />
          <span>{{ userInfo.code }}</span>
        </div>
        <van-button block round type="info" class="login-out" @click="logout">
          Log out
        </van-button>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { findOrderList, findCustomerCounter } from "@/api/customer";
import { List, Search, Dialog } from "vant";
@Component({
  components: {
    List,
    Search,
    Dialog,
  },
})
export default class Customer extends Vue {
  private userInfo = JSON.parse(
    JSON.parse(JSON.stringify(localStorage.getItem("userinfo")))
  );
  private currentDate = new Date();
  private showDatePopup = false;
  private pageLoading = false;
  private finished = false;
  private listData = [];
  // 总条数
  private total = 0;
  // 数据
  private queryCondition: any = {
    date: "",
    keyword: "",
    pageNum: 1,
    pageSize: 10,
  };
  private active = 0;
  // 获取订单列表
  private async getOrderList(): Promise<void> {
    try {
      this.pageLoading = true;
      const data = await findOrderList(this.queryCondition);
      this.listData = this.listData.concat((data as any).rows);
      this.total = (data as any).total;
      this.pageLoading = false;
    } catch (e) {
      this.total = 0;
      this.pageLoading = false;
    }
  }
  // 获取货柜列表
  private async getCustomerCounter(): Promise<void> {
    try {
      this.pageLoading = true;
      const data = await findCustomerCounter(this.queryCondition);
      this.listData = this.listData.concat((data as any).rows);
      this.total = (data as any).total;
      this.pageLoading = false;
    } catch (e) {
      this.total = 0;
      this.pageLoading = false;
    }
  }
  // 切换tabs
  private async changeTabs(val: any): Promise<void> {
    this.queryCondition.pageNum = 1;
    this.queryCondition.keyword = "";
    this.listData = [];
    if (val == 1) {
      await this.getCustomerCounter();
    } else {
      await this.getOrderList();
    }
  }
  // 生命钩子
  private async created(): Promise<void> {
    await this.getOrderList();
  }
  // 容器触底
  private scrollHandle(): void {
    if (this.listData.length < this.total) {
      this.queryCondition.pageNum++;
      if (this.active == 1) {
        this.getCustomerCounter();
      } else {
        this.getOrderList();
      }
    } else {
      this.finished = true;
    }
  }
  // 关键词搜索
  private keywordQuery(): void {
    this.queryCondition.keyword = this.queryCondition.keyword.trim();
    this.queryCondition.pageNum = 1;
    this.listData = [];
    if (this.active == 0) {
      this.getOrderList();
    } else {
      this.getCustomerCounter();
    }
  }
  // 刷新
  private restList(): void {
    this.listData = [];
    this.queryCondition.keyword = "";
    this.queryCondition.pageNum = 1;
    if (this.active == 0) {
      this.getOrderList();
    } else {
      this.getCustomerCounter();
    }
  }
  private logout(): void {
    Dialog.confirm({
      title: "warn",
      message: "Log out？",
      confirmButtonText: "OK",
      cancelButtonText: "cancel",
    })
      .then(() => {
        window.localStorage.removeItem("userinfo");
        window.localStorage.removeItem("customer-token");
        this.$router.push("/");
      })
      .catch(() => {
        // on cancel
      });
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  .user-info-box {
    border: none !important;
    box-sizing: border-box;
    padding: 0 10px 0 10px;
    .van-cell-group {
      position: relative;
      height: 100% !important;
    }
    .user-info-item {
      width: 100%;
      height: 55px;
      display: flex;
      align-items: center;
      border-bottom: 1px #f5f5f5 solid;
      .van-icon {
        margin-right: 5px;
      }
    }
    .login-out {
      position: absolute;
      bottom: 35px;
    }
  }
  ::v-deep .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0 !important;
  }
  .header-box {
    width: 100%;
    height: 55px;
    .header-item {
      width: 100%;
      height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      .van-field {
        border-bottom: 1px #f5f5f5 solid;
      }
      ::v-deep .van-icon-search {
        font-size: 20px !important;
        padding-right: 5px;
      }
      ::v-deep .van-field__control {
        font-size: 15px;
      }
    }
  }
  .filter-rest {
    width: 40px;
    height: 49px;
    position: absolute;
    top: 0;
    right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .filter-rest {
    right: 5px !important;
  }
  .tabs-box {
    width: 100%;
    height: 40px;
    border-bottom: 1px red solid;
  }
  ::v-deep .van-tabs--line .van-tabs__wrap {
    padding-left: 10px !important;
  }
  ::v-deep .van-tab--active {
    font-weight: 600;
  }
  ::v-deep .van-tab {
    font-size: 16px !important;
    margin-right: 10px !important;
  }
  ::v-deep .van-tabs {
    box-sizing: border-box;
    padding: 0px 10px !important;
  }
  ::v-deep .van-tab {
    flex: none !important;
  }
  .filter-date-box {
    height: 45%;
    .keyword-box {
      width: 100%;
      height: 20px;
      border: 1px red solid;
    }
  }
  .list-box {
    height: calc(100% / 1 - 104px);
    box-sizing: border-box;
    padding: 0px 10px !important;
    background-color: #e3e3e3;
    overflow-y: auto;
    .order-item {
      width: 100%;
      margin-top: 10px;
      background-color: #ffffff;
      border-radius: 5px;
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
        0 2px 4px 0 rgba(232, 237, 250, 0.5);
      .item-label {
        font-weight: 600;
      }
      .order-header {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 10px;
        border-bottom: 1px #dcdcdc solid;
      }
      .order-info {
        width: 100%;
        box-sizing: border-box;
        padding: 5px 10px !important;
        p {
          line-height: 30px;
        }
      }
    }
  }
}
</style>
